<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>哎</title>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jquery.transit.js"></script>
    <link rel="stylesheet" href="test.css"/>
    <style type="text/css">
        .first{width: 100%; height: 100%; position: absolute}
        .top{background-image: url("../images/background/a_background_top.png"); width: 100%; height: 71.6%; background-size: 100% 100%}
        .middle{background-image: url("../images/background/a_background_middle.png"); width: 100%; height: 13.1%; background-size: 100% 100%}
        .botton{background-image: url("../images/background/a_background_botton.png"); width: 100%; height: 15.3%; background-size: 100% 100%}

        .charactor{background: url(../images/background/boy.png) -0px -291px no-repeat; width: 151px; height: 291px;
            position: absolute; top: 35%; left:6%}
        .slowWalk {
            /*谷歌浏览器*/
            /*动画名称*/
            -webkit-animation-name: person-slow;
            /*一次周期耗时*/
            -webkit-animation-duration: 950ms;
            /*是否循环播放 默认是1*/
            -webkit-animation-iteration-count: infinite;
            /*动画是一帧一帧播放*/
            -webkit-animation-timing-function: steps(1, start);
        }

        @-webkit-keyframes person-slow {
            0% {
                background-position: -0px -291px;
            }
            25% {
                background-position: -602px -0px;
            }
            50% {
                background-position: -302px -291px;
            }
            75% {
                background-position: -151px -291px;
            }
            100% {
                background-position: -0px -291px;
            }
        }
    </style>
</head>
<body>
    <div id="content">
        <ul class="content-wrap">
            <li>
                <div class="first">
                    <div class="top"></div>
                    <div class="middle"></div>
                    <div class="botton"></div>
                </div>
            </li>
            <li>second</li>
            <li>third</li>
        </ul>

        <div id="boy" class="charactor slowWalk"></div>


        <!--测试区代码-->
        <!--<div class="button">-->
            <!--<button>点击移动</button>-->
        <!--</div>-->
        <!--<div class="button">-->
            <!--<button id="btn" type="button" onclick="walk()">点击开始动画</button>-->
        <!--</div>-->
        <div class="button">
            <button type="button" onclick="walk()">点击开始动画</button>
        </div>


    </div>
    <script type="text/javascript">
        var content = $("#content");
        var width = content.width();
        var height = content.height();
        //获取li的个数
        var lis = content.find("li");
        var liLength = lis.length;
        //设置ul的长度和宽度
        var ul = content.find(":first");
        $(ul).css({width:(liLength*width)+'px', height: height+'px'});
        //设置li的长度和宽度
        $(lis).each(function(index,ele){
            $(ele).css({width: width, height: height})
        });


        //测试区代码
//        $("button").click(function(){
//            $(ul).css({'transition-timing-function': 'linear','transition-duration': '5000ms',
//                'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)'});
//        });
        function walk(){
//            $("#boy").addClass("slowWalk");
            $("#boy").transition({
                left:$("#content").width()+"px"
            }, 7000, 'linear');
        }
    </script>
</body>
</html>